<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
    <meta charset="UTF-8">
    <title>考勤统计系统</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <style>
        .chart-container {
            width: 100%;
            height: 300px;
            margin: 1% auto;
        }
        .container {
            display: flex;
            justify-content: space-between;
            padding: 10px;
        }
        .con-left, .con-right {
            width: 48%;
        }
        .boxstyle {
            margin: 10px 0;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 10px;
        }
        body {
            background-image: url('images/bg.jpg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            background-attachment: scroll;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="con-left">
        <div class="boxstyle">
            <div class="title">课程出勤统计</div>
            <div id="attendanceChart" class="chart-container"></div>
        </div>
    </div>
    <div class="con-right">
        <!-- 其他图表可以放在这里 -->
    </div>
</div>

<%------------------1------------------%>
<script type="text/javascript">
    // 确保获取的是正确的DOM元素
    var chartDom = document.getElementById('attendanceChart');
    // 初始化图表
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        title: {
            text: '课程出勤统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['出勤数', '缺勤数']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '出勤数',
                type: 'line',
                data: [],
                smooth: true,
                lineStyle: {
                    color: 'green'
                }
            },
            {
                name: '缺勤数',
                type: 'line',
                data: [],
                smooth: true,
                lineStyle: {
                    color: 'red'
                }
            }
        ]
    };
    // 初始设置图表选项
    myChart.setOption(option);

    // 模拟从后端获取数据并更新图表
    function fetchAndDrawData() {
        // 模拟从后端获取数据
        // 这里可以替换为实际的 AJAX 请求或 WebSocket 接收数据
        $.ajax({
            type: "get",
            url: "/getAttendanceData",
            dataType: "json",
            success: function (data) {
                // 更新数据
                var timeStamps = data.map(item => item.timestamp);
                var attendance = data.map(item => item.totalAttendance);
                var absence = data.map(item => item.totalAbsence);

                // 更新图表的series数据
                myChart.setOption({
                    xAxis: {
                        data: timeStamps
                    },
                    series: [
                        {
                            name: '出勤数',
                            data: attendance
                        },
                        {
                            name: '缺勤数',
                            data: absence
                        }
                    ]
                });
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // 处理请求失败的情况
                console.error("AJAX Error: " + textStatus, errorThrown);
            }
        });
    }

    // 初始绘制图表
    fetchAndDrawData();

    // 每 2 秒更新一次图表
    setInterval(fetchAndDrawData, 2000);
</script>

</body>
</html>
